<template>
	<view class="tag-container">
		<view class="tag-list">
			<!-- 当用户点击列表项的时候，会触发$tool.toPage函数 -->
			<view class="item" @tap="$tool.toPage(`/pages/topic/topicList?title=${item.title}&tagId=${item.id}`)"
				v-for="(item, index) in tagList">
				<!-- mode="aspectFill"：按照原始比例缩放图片，使图片的短边能完全填充容器，可能会裁剪掉部分图片 -->
				<image mode="aspectFill" class="thumb" :src="item.thumb"></image>
				<view class="title">#{{ item.title }}</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			tagList: []
		}
	},
	computed: {},
	watch: {},
	onLoad() {
		uni.showLoading({
			title: '加载中'
		})
		this.initData().then(res => {
			uni.hideLoading()
		})
	},
	onShow() {
		this.initData()
	},
	onPullDownRefresh() {
		this.$showPullRefresh()

		this.initData()
	},
	methods: {
		initData() {
			return this.$http('/topic-tags', 'GET', {
				'per_page': 1000
			}).then(res => {
				this.tagList = res.data.list
			})
		}
	},
	onPageScroll(e) { }
}
</script>

<style lang="scss" scoped>
page {
	background-color: #151515;
}

.tag-container {

	/* background-color: #3b3b3b; */
	.tag-list {
		width: 100%;
		padding: 0rpx 30rpx 60rpx 30rpx;
		box-sizing: border-box;
		// white-space: nowrap;
		display: flex;
		flex-wrap: wrap;
		// margin-left: 30rpx;
		justify-content: space-between;

		.item {
			margin-top: 20rpx;
			// border: 1px solid blue;
			box-shadow: inset 0px 0px 6px 0px rgba(226, 222, 204, 0.4);
			padding: 10rpx 12rpx;
			/* border-radius: 20rpx; */
			// display: flex;
			align-items: center;
			flex-direction: column;
			// margin-right: 16rpx;

			.thumb {
				width: 198rpx;
				height: 238rpx;
				/* border-radius: 40rpx; */
			}

			.title {
				font-size: 26rpx;
				font-weight: 500;
				color: #ecd4ad;
				line-height: 40rpx;
				margin-top: 10rpx;
				text-align: center;
				width: 200rpx;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}

}
</style>
